<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .mc {
            color: red;
            background-color: orange;
            width: 200px;
            height: 360px;
            font-size: 18px;
            /* 通过transition（过渡）动态进行变化 */
            /* transition-property: all;
        transition-duration: 3s;
        transition-timing-function: ease-in-out;
        transition-delay: 1s; */
            transition: all 4s ease-in 2s;
        }
        
        .mc:hover {
            color: blue;
            background-color: green;
            width: 300px;
            height: 240px;
            font-size: 32px;
        }
    </style>

    <!-- 变换Transition：有几个状态？2个，开始和结束。 -->
    <!-- 动画Animation：具有多（n>=0）个状态 -->
    <!-- 变化Transform： 可以作为普通属性应用于Transition和Animation -->
</head>

<body>
    <!-- 需求：当鼠标悬停的时候，变化文字大小、颜色、背景色、容器大小 -->
    <!-- 过渡：相对于html元素的状态而产生的变化 -->
    <!-- 零，一或两个 <time> 值。可以解析为时间的第一个值被分配给 transition-duration，并且可以解析为时间的第二个值被分配给transition-delay。 -->

    <div class="mc">HelloWorld</div>
</body>

</html>